
import React from 'react';
import { browserHistory } from 'react-router';
import { api } from 'js/api/api';
import Icon from 'views/component/icon/icon';
import Button from 'views/component/button/button';
import mapData from 'js/data/mapData';
import playerStorage from 'js/core/playerStorage';
import './map.scss';
import { observer, inject } from 'mobx-react';
import Luopan from './luopan';

@inject("playerStore")
@observer
class Main extends React.Component {
    constructor(props) {
        super(props)
        this.player = this.props.playerStore.player;
        this.state = {
            mapType: 1,
            luppanShow: false,
            msg: playerStorage.getMsg(),
        }
    }
    componentDidMount() {
        window.eventHandle.on('log', (data) => {
            if (typeof data === 'string') {
                this.state.msg.push(data);
                this.setState({})
            } else if (Array.isArray(data)) {
                let len = data.length;
                let i = 0;
                this.state.msg.push(data[i]);
                this.setState({})
                i += 1;
                let timer = setInterval(() => {
                    if (i > len - 1) {
                        clearInterval(timer);
                    } else {
                        this.state.msg.push(data[i]);
                        this.setState({})
                    }
                    i += 1;
                }, 1000)
            }

        });
    }
    go = (mapId) => {


        api('go', { mapId: parseInt(mapId) }, () => {
            let mapConfig = window.totalConfig.map;
            let mapType = mapConfig[mapId].route;
            this.setState({ mapType: mapType })
            browserHistory.push('/map/' + mapType);
        })
    }
    goto = () => {
        api('go', (res) => {
            this.setState({})
        });
    }
    getMapNode = (mapType, i) => {
        let player = this.player;
        let mapInfos = player.mapInfos;
        let mapConfig = window.totalConfig.map;
        let route = mapConfig[i].route, name = mapConfig[i].name;
        let mapInfo = mapInfos[i];
        let className = "mapItem";
        if (mapType === route) {
            className += ' active';
        }
        if (mapInfo.show === false) {
            className += ' v-hidden';
        }
        // name = name ;
        if (mapConfig[i].className) {
            className += ' ' + mapConfig[i].className;
            name = '';
        }

        if (mapConfig[i].copy) {
            return <div className={className + " copy"} onClick={() => { this.go(i) }} key={i}>{name}</div>
        } else {
            return <div className={className} onClick={() => { this.go(i) }} key={i}>{name}</div>
        }
    }
    showLuopan = () => {
        this.setState({ luppanShow: true })
    }
    render() {
        let { msg } = this.state;

        let msgNode = [];
        for (let i = msg.length - 1; i >= 0; i--) {
            msgNode.push(<div key={i}>{msg[i]}</div>)
        }
        return (
            <div id="map" className="flex-col">
                <div className="mapContent">
                    {this.props.children}
                </div>
                <div className="log flex-g-1 scroll-absolute">
                    <div className="logContent">
                        {msgNode}
                    </div>
                </div>
            </div>
        );
    }
}
export default Main;
